<template>
  <div class="app-container">
    <split-pane :min-percent='30' :default-percent='40' split="vertical">
      <template slot="paneL">
        <el-card class="m-l-5 dict-tree">
          <el-button-group style="display:flex;margin-bottom:15px">
            <el-input v-model="filterDictText" size="mini" placeholder="搜索字典" clearable />
            <el-button v-permission="['system:dict:delete']" size="mini" plain type="danger" icon="el-icon-delete" @click="handleDel">删除</el-button>
          </el-button-group>

          <el-tree
            ref="dictTree"
            node-key="id"
            :data="treeData"
            :props="treeProps"
            :filter-node-method="filterNode"
            class="filter-tree"
            show-checkbox
            check-strictly
            highlight-current
            check-on-click-node
            :default-expanded-keys="['0']"
            @node-click="selectDict"
          >
            <span slot-scope="{ data }" class="custom-tree-node w-100">
              <span>{{ data.name }}</span>
              <span class="fr">
                <el-link v-permission="['system:dict:add']" style="font-size:small;" type="success" @click.stop="handleForm(data.id)">添加子节点</el-link>
              </span>
            </span>
          </el-tree>
        </el-card>
      </template>

      <template slot="paneR">
        <!-- 搜索区域 -->
        <el-card class="filter-form">
          <el-form ref="dictForm" :model="form" :rules="rules" label-width="120px">
            <el-form-item hidden>
              <el-input v-model="form.dictCode" hidden />
            </el-form-item>
            <el-form-item prop="parentCode" hidden>
              <el-input v-model="form.parentCode" hidden />
            </el-form-item>
            <el-form-item prop="ancestors" hidden>
              <el-input v-model="form.ancestors" hidden />
            </el-form-item>
            <el-form-item prop="isLeaf" hidden>
              <el-input v-model="form.isLeaf" hidden />
            </el-form-item>
            <el-form-item label="字典组" prop="dictGroup">
              <el-input v-model="form.dictGroup" />
            </el-form-item>
            <el-form-item label="字典标签" prop="dictLabel">
              <el-input v-model="form.dictLabel" />
            </el-form-item>
            <el-form-item label="英文标签" prop="dictLabelEn">
              <el-input v-model="form.dictLabelEn" />
            </el-form-item>
            <el-form-item label="字典键值" prop="dictValue">
              <el-input v-model="form.dictValue" />
            </el-form-item>
            <el-form-item label="字典类型" prop="dictType">
              <el-select v-model="form.dictType" @change="changeDictType">
                <el-option label="组" value="00" />
                <el-option label="选项" value="01" />
              </el-select>
            </el-form-item>
            <el-form-item label="样式属性" prop="cssClass">
              <el-select v-model="form.cssClass" allow-create filterable>
                <el-option label="默认" value="#" />
                <el-option label="信息" value="info" />
                <el-option label="主要" value="primary" />
                <el-option label="成功" value="success" />
                <el-option label="警告" value="warning" />
                <el-option label="危险" value="danger" />
                <el-option label="红色" value="error" />
              </el-select>
              <span class="help-block"><i class="fa fa-info-circle" />表格字典列显示样式属性</span>
            </el-form-item>
            <el-form-item label="排序">
              <el-row>
                <el-col :span="1.5">
                  <el-input-number v-model="form.dictSort" size="small" :min="1" />
                </el-col>
                <el-col :span="1.5">
                  <label class="m-l-20 m-r-10 el-form-item__label">状态</label>
                  <el-select v-model="form.status" size="small">
                    <el-option
                      v-for="item in optionOfStatus"
                      :key="item.dictCode"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="补充说明1" prop="desc1">
              <el-input
                v-model="form.desc1"
                type="textarea"
                rows="2"
              />
            </el-form-item>
            <el-form-item label="补充说明2" prop="desc2">
              <el-input
                v-model="form.desc2"
                type="textarea"
                rows="2"
              />
            </el-form-item>
            <el-row type="flex" justify="center">
              <el-button v-permission="['system:dict:edit']" type="primary" icon="el-icon-check" :disabled="form.parentCode===undefined" @click="handleSave">保 存</el-button>
              <el-button v-permission="['system:dict:delete']" type="danger" icon="el-icon-delete" :disabled="form.parentCode===undefined || form.dictCode===undefined" @click="handleDel(form.dictCode)">删 除</el-button>
            </el-row>
          </el-form>
        </el-card>
      </template>>
    </split-pane>
  </div>
</template>

<script>
import { dictTreeData, dictLoad, dictSave, dictDelete } from '@/api/system/dict'
import SplitPane from 'vue-splitpane'

export default {
  components: {
    SplitPane
  },
  data() {
    return {
      filterDictText: '',
      treeData: [],
      treeProps: {
        children: 'children',
        label: 'name'
      },
      form: {
        dictCode: undefined,
        parentCode: undefined,
        ancestors: undefined,
        isLeaf: undefined,
        dictGroup: undefined,
        dictLabel: undefined,
        dictLabelEn: undefined,
        dictValue: undefined,
        dictSort: 1,
        dictType: '00',
        cssClass: '#',
        status: undefined,
        desc1: undefined,
        desc2: undefined
      },
      rules: {
        dictGroup: [{ required: true, message: '字典组不能为空' }],
        dictLabel: [{ required: true, message: '字典标签不能为空' }]
      },
      optionOfStatus: []
    }
  },
  watch: {
    filterDictText(val) {
      this.$refs.dictTree.filter(val)
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 加载下拉菜单
      this.getTreeData()
      this.getDictData()
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getDictData() {
      this.$dictGroup('sys_normal_disable').then(response => {
        this.optionOfStatus = response
      }).catch(e => {})
    },
    getTreeData() {
      dictTreeData({ from: 'vue' }).then(response => {
        this.treeData = response
      }).catch(e => {})
    },
    selectDict(data, node) {
      this.onCancel()
      this.form.dictCode = data.id
      dictLoad({ 'id': data.id }).then(response => {
        this.form = this.$api.objectUpdate(this.form, response.param)
        this.changeDictType()
      }).catch(() => {})
    },
    changeDictType() {
      if (this.form.dictType === '00') {
        this.form.isLeaf = 'N'
      } else {
        this.form.isLeaf = 'Y'
      }
    },
    handleForm(parentId) {
      this.onCancel()
      parentId = parentId | '0'
      this.form.parentCode = parentId
      dictLoad({ 'pid': parentId }).then(response => {
        this.form = this.$api.objectUpdate(this.form, response.param)
        this.changeDictType()
      }).catch(() => {})
    },
    handleSave() {
      this.$refs.dictForm.validate(valid => {
        if (valid) {
          dictSave(this.form).then(response => {
            this.$modal.msgSuccess(response.msg)
            this.getTreeData()
          }).catch(() => {})
        }
      })
    },
    handleDel(id) {
      const code = id || this.$refs.dictTree.getCheckedNodes()
      if (!code) {
        this.$modal.msgWarning('请选择要删除的内容')
        return
      }

      this.$confirm('是否删除所选内容?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        dictDelete({ ids: code }).then(response => {
          this.$modal.msgSuccess(response.msg)
          this.getTreeData()
        }).catch(e => {})
      }).catch(e => {})
    },
    onCancel() {
      this.$refs.dictForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}

.filter-tree {
  overflow-y: auto;
}
.filter-form {
  overflow-y: auto;
  margin: 0 0 10px 15px;
}

.app-container {
  .filter-tree {
    height: calc(100vh - 240px);
  }
  .filter-form {
    height: calc(100vh - 145px);
  }
}

.fixed-header+.app-main {
  .app-container {
    .filter-tree {
      height: calc(100vh - 240px);
    }
    .filter-form {
      height: calc(100vh - 145px);
    }
  }
}

.hasTagsView {
  .app-main {
    .app-container {
      .filter-tree {
        height: calc(100vh - 278px);
      }
      .filter-form {
        height: calc(100vh - 183px);
      }
    }
  }
}

.hasTagsView {
  .fixed-header+.app-main {
    .app-container {
      .filter-tree {
        height: calc(100vh - 278px);
      }
      .filter-form {
        height: calc(100vh - 183px);
      }
    }
  }
}
</style>
